<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/jquery.js"></script>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li class="box">222</li>
      <li>333</li>
      <li class="box">444</li>
      <li>555</li>
    </ul>
    <script>
      // 1.jq里的链式调用 2.jq里的隐式迭代（不需要循环） 3.jq各种动画

      // 筛选器
      //   $("li:eq(0)").click(function () {
      //     console.log("点击了");
      //   });
      // 1.eq(index) 筛选器
      //   $("li")
      //     .eq(1)
      //     .click(function () {
      //       console.log("点击了");
      //     });

      // 2.筛选出第一个元素；first
      //   $("li")
      //     .first()
      //     .click(() => {
      //       console.log("点击了");
      //     });

      // 3.筛选出最后一个元素
      //   $("li")
      //     .last()
      //     .click(function () {
      //       console.log("点击了");
      //     });

      // 4.end() 可以回退到上一个选择的元素
      // 链式操作
      //   $("li")
      //     .eq(0)
      //     .eq(0)
      //     .end()
      //     .end()
      //     .click(function () {
      //       console.log("点击了");
      //     });
      //   $("li").click(function () {
      //     console.log("点击");
      //   });

      // 5.筛选下一个元素 next
      //   $("li")
      //     .eq(2)
      //     .next()
      //     .click(function () {
      //       console.log("点击了");
      //     });

      // 6.筛选出上一个元素
      //   $("li")
      //     .eq(1)
      //     .prev()
      //     .click(function () {
      //       console.log("点击了");
      //     });

      // 7.筛选下一个之后的所有元素
      //   $("li").eq(2).nextAll().css("background", "red");

      // 8.筛选出上一个所有的元素
      //   $("li").eq(2).prevAll().css("background", "red");

      // 9.获取所有的兄弟元素siblings
      //   $("li").eq(1).siblings().css("background", "red");

      // 10.筛选所有的父级元素；
      //   var res = $("li").eq(1).parents();
      //   console.log(res);

      // 11.筛选父级元素
      // $("li").eq(1).parent().css("background","red");

      // 12.查找某个元素 父级元素.find()
      // $("ul").find(".box").css("background","red");

      // 13.筛选不是某一个类名标签名的元素
      //   $("li").not(".box").css("background", "red");

      // 14.筛选需要的类名 或者id名 标签名的元素
      //   $("li").filter(".box").css("background", "red");

      // 15.查找元素所在的索引 index
      // 1.隐式迭代，获取多个元素不需要循环，直接绑定事件
      // 2.可以通过$(原生对象) 方式把 元素的对象转成 jq的对象
      //    console.log(  $("li").eq(2));
      // $("li").click(function () {
      // console.log("点击了");
      // console.log(this);
      // var index = $("li").index(this);
      // console.log(index);
      // $(this).css("background", "red");
      //});
    </script>
  </body>
</html>
